import React from 'react';
import {IndeterminateComponent} from './ReactWorkTags';
import {render} from './ReactFiberWorkLoop';
import {useReducer,useState,useEffect,useLayoutEffect,useRef,useMemo} from './ReactFiberHooks';


let lastData;

//useState其实是useReducer的语法糖
const reducer = (state, action) => {
  if (action.type === 'add')
    return state + 1;
  else
    return state;
}


//函数组件
function Counter(){
  console.log('渲染');
  const [number2, setNumber2] = useReducer(reducer, 0);
  const numberRef = useRef();
  const [number, setNumber] = useState(0);
  const [age, setAge] = useState(0);
  const data = useMemo(()=>({age}),[age]);
  console.log("lastData === data",lastData === data);

  useEffect(()=>{
     console.log('useEffect1');
     numberRef.current = number
     setTimeout(()=>{
        console.log(numberRef.current)
     },3000)
     return ()=>{
       console.log('destroy useEffect1');
     }
  });
  debugger
  useLayoutEffect(()=>{
     console.log('useLayoutEffect2');
     return ()=>{
       console.log('destroy useLayoutEffect2');
     }
  });
  useEffect(()=>{
     console.log('useEffect3');
     return ()=>{
       console.log('destroy useEffect3');
    }
  });


  return (
    //如果想触发点击时间，可以再浏览器控制台执行window.counter.props.onClick()
    // <div onClick={() => {setNumber2({ type: 'add' })}}>{number2}</div>  
    <div onClick={() => {setNumber(2)}}>{number}</div>
    
  )
}
let counterFiber = {
  tag:IndeterminateComponent, //Fiber的类型 函数组件在初次渲染的时候对应的类型 是IndeterminateComponent
  type:Counter,//此组件的具体 类型是个组件
  alternate:null //上一个渲染的fiber
}
render(counterFiber);

